<!--titleArr: ['aaa', 'bbb', 'ccc']-->
<!--例子：<breadCrumb :titleArr="titleArr" @back="back"></breadCrumb>-->
<template>
  <div class="breadCrumb" :style="{ fontSize:fontSize + 'px' }">
    <i class="icon el-icon-arrow-left back" @click="back"></i>
    <span v-for="(item, index) in titleData" :key="index">
      <span class="marginr other back" :class="titleData.length === 1 ?'onlyOne':''" v-if="index === 0" @click="back">{{item}}</span>
      <span class="marginr other" v-if="index !== (titleData.length - 1) && index !== 0">{{item}}</span>
      <span class="marginr last" v-if="index === (titleData.length - 1) && index !== 0">{{item}}</span>
      <span class="marginr" v-show="index !== (titleData.length - 1)">/</span></span>
  </div>
</template>
<script>
  export default {
    data () {
      return {
      }
    },
    methods: {
      back () {
        this.$emit('back')
      }
    },
    props: {
      fontSize: {
        type: Number,
        default: 12
      },
      titleArr: {
        type: Array,
        default: function () {
          [this.$t('public.config')]
        }
      }
    },
    computed: {
      titleData () {
        return this.titleArr
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .breadCrumb
    height 30px
    line-height 30px
    padding 3px 10px
    border-bottom 1px solid $c-border2
    .icon
      color $c-main
      display inline-block
      width 18px
      height 18px
      line-height 18px
      border 1px solid $c-main
      border-radius 50%
      text-align center
    .el-icon-arrow-left
      font-size 12px
      margin-right 10px
    .marginr
      margin-right 3px
    .last,.onlyOne
      font-weight bold
    .other
      color $cf-gray4
    .back
      cursor pointer
    .back:hover
      color $c-main
    .onlyOne
      color $cf-gray0
</style>
